<template>
  <div style="height: 100%;overflow:hidden">
    <x-header :left-options="{preventGoBack:true,backText: ''}"
              @on-click-back="backhome">安全检查单查看</x-header>
    <div class="main-container "
         style="height:93%">
      <!-- <div id="map"></div> -->
      <v-touch v-on:swiperight="onSwipeRight"
               :swipe-options="{direction: 'horizontal'}">
        <div>
          <group>
            <cell title='项目部'
                  v-model="proDept"></cell>
            <cell title="工程项目"
                  v-model="pro">
              <!-- <span>{{pro}}</span>  -->
            </cell>
            <cell v-model="checkDate"
                  title="检查日期"> </cell>
            <cell v-model="isReply" title="是否回复"></cell>
            <cell title="类别"
                  v-model="FATHERCLASS"></cell>
            <cell title="检查项目"
                  v-model="CHECKPRO"></cell>
            <!-- <cell title="检查项"  v-model="CHECKITEMS"></cell> -->
            <x-textarea title="检查项"
                        v-model="CHECKITEMS"
                        readonly></x-textarea>
          </group>
          <group title="描述">
            <x-textarea placeholder="请输入一段描述"
                        v-model="DESCRIPTION"
                        readonly></x-textarea>
          </group>
          <group title="检查图片">
            <!-- <picture-upload :pageToken="pageToken" :fieldToken="fieldToken"></picture-upload> -->

            <picture-upload :fieldToken='ATTACHMENTS'
                            :pageToken='ATTACHMENTS'
                            :value='ATTACHMENTS'
                            :readonly='true'></picture-upload>

          </group>
          <!-- <picture-upload :fieldToken='list[i][key]'
                              :pageToken='list[i][key]'
                              :value='list[i][key]'
                              :readonly='!needModify(key)'></picture-upload> -->

          <!-- <div v-for="(i, index) in fileNameItem" class="file" >
            <img src="../../svg/pdf.svg" alt="" class="file-icon">
            <span class="file-name">{{i.fileOldName}}</span>
            <span class="file-size">{{i.fileSize}} KB</span>
        </div> -->
          <group>
            <cell title="填写人"
                  v-model='name'></cell>
            <cell title="联系电话"
                  v-model='phone'></cell>
            <cell title="填写部门"
                  v-model='dept'></cell>
            <cell title="填写时间"
                  v-model='inputDate'></cell>
          </group>
          <!-- <group>
           <x-button @click.native="saveInspectionInfo">submit</x-button>
            <Toast :value="toastValue" :is-show-mask="true" text="保存成功" @on-hide="saveSuccess"></Toast>
            <Toast :value="toastValueErr" :is-show-mask="true" :text="err" @on-hide="saveErr" type="cancel" width="200px"></Toast>
        </group> -->
        </div>
      </v-touch>
    </div>
  </div>
</template>
 
<script>
import * as L from 'leaflet'
//Vue.L = Vue.prototype.$L = L 
import { Group, Cell, XButton, Box, GroupTitle, Flexbox, FlexboxItem, Divider, Calendar, PopupPicker, Toast } from 'vux'
// import { TIMEOUT } from 'dns';
var map = null;
var marker = null;
export default {
  components: {
    XButton,
    Box,
    GroupTitle,
    Group,
    Flexbox,
    FlexboxItem,
    Divider,
    Group,
    Cell,
    Calendar,
    PopupPicker,
    Toast
  },
  name: 'HelloWorld',
  data () {
    return {
      //   msg: 'Welcome to Your Vue.js App',
      proDept: "",
      pro: this.$route.query.pro,
      proId: this.$route.query.proId,
      GUID: this.$route.query.GUID,
      centerPosition: this.$route.query.site,
      site: this.$route.query.site,
      FATHERCLASS: "",
      CHECKPRO: "",
      CHECKITEMS: "",
      name: "",
      phone: "",
      dept: "",
      DESCRIPTION: "",
      pageToken: "",
      fieldToken: "",
      buttonid: "",
      // map:"",
      checkDate: '',
      name: "",
      phone: "",
      dept: "",
      inputDate: "",
      ATTACHMENTS: "",
      fileNameItem: [],
      isReply:"",
    }
  },
  methods: {
    onSwipeRight () {
      this.$router.push('/hidangereport');
    },
    backhome () {
      this.$router.push('/hidangereport');
    },
    //下载附件
    checkFile (fileId, name, size) {
      var url = 'http://qhsz.simulate.com:8080/qhszpm/servlet/StreamSupportAction.cmd?type=%27customerDownloadService%27&FixJSON=%7B_method%3A%27streamSupportService.getAttachment%27%2C_param%3A%7BattachmentId%3A' + fileId + '%7D%7D';

      this.$router.push({
        path: '/fileInfo',
        name: 'fileInfo',
        params: {
          name: name,
          size: size,
          url: url
        }
      })
    }
  },
  mounted () {
    var greenIcon = L.icon({
      iconUrl: '../src/assets/img/sign-in.png',
      iconSize: [26, 44], // size of the icon
      iconAnchor: [17, 48], // point of the icon which will correspond to marker's location
      //popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
    //获取表单数据信息
    var params = {
      "_method": "formService.getFormData",
      "requestEventData": {        "eventType": "formInitEvent",
        "formType": 1,
        "bizObjId": "PMHSE_INSPECTION",
        "formId": "PMHSE_INSPECTION_ADD"      },
      "useType": "view",
      "getData": {        "useType": "view",
        "objName": "PMHSE_INSPECTION",
        "relatedObj": ["PMHSE_INSPECTION"],
        "pk": [{ "key": "GUID", "value": this.GUID }]      },
      "getSysVar": { "SYSTODAY": "{sysDate.Today}", "INPUTERFULLNAME": "{sysLoginUser.userName}", "PHONENUM": "{sysLoginUser.mobil}", "INPUTERDEPTNAME": "{sysLoginUser.orgName}", "INPUTDATE": "{sysDate.Today}" },
      "getFormVerify": { "objName": "PMHSE_INSPECTION", "viewId": "PMHSE_INSPECTION_ADD" },
      "getToolbar": { "useType": "view", "objName": "PMHSE_INSPECTION", "viewId": "PMHSE_INSPECTION_ADD" }
    };
    let json = {
      FixJSON: JSON.stringify(params),
    };
    this.$ajax({
      // async:false,
      url: this.COMMON_URL ,//+ "?_isBreak=false&objName=PMHSE_INSPECTION&_useType=view&_pk=GUID&_pkValue=" + this.GUID,
      method: 'post',
      // data: this.signMD5(json)
      data: json
    }).then(res => {
      console.log(res);
      this.checkDate = res.data.getData.PMHSE_INSPECTION[0].CHECKDATE.val.substring(0, 10);
      this.FATHERCLASS = res.data.getData.PMHSE_INSPECTION[0].FATHERCLASS.val;
      this.CHECKPRO = res.data.getData.PMHSE_INSPECTION[0].CHECKPRO.val;
      this.CHECKITEMS = res.data.getData.PMHSE_INSPECTION[0].CHECKITEMS.val;
      this.DESCRIPTION = res.data.getData.PMHSE_INSPECTION[0].DESCRIPTION.val;
      this.name = res.data.getData.PMHSE_INSPECTION[0].INPUTERFULLNAME.val;
      this.phone = res.data.getData.PMHSE_INSPECTION[0].PHONENUM.val;
      this.dept = res.data.getData.PMHSE_INSPECTION[0].INPUTERDEPTNAME.val;
      this.inputDate = res.data.getData.PMHSE_INSPECTION[0].INPUTDATE.val.substring(0, 16);
      this.centerPosition = res.data.getData.PMHSE_INSPECTION[0].CENTERPOSITION.val;
      this.ATTACHMENTS = res.data.getData.PMHSE_INSPECTION[0].ATTACHMENTS.val;
      this.proDept = res.data.getData.PMHSE_INSPECTION[0].PRODEPT.val;
      this.isReply = res.data.getData.PMHSE_INSPECTION[0].ISREPLY.val;

      //获取附件
      //console.log("附件", this.ATTACHMENTS)
      // var params = {
      //   "_method": "streamSupportService.getAttachmentInfos",
      //   "_param": [{ "fieldToken": this.ATTACHMENTS }]
      // };
      // json = {
      //   FixJSON: JSON.stringify(params),
      // };
      // this.$ajax({
      //   url: this.COMMON_URL,
      //   method: 'post',
      //   data: this.signMD5(json)
      // }).then(res => {
      //   this.fileNameItem = res.data.attachments;
      //   //console.log(this.fileNameItem);
      // });
    });

    //console.log("jkakjhskj"+this.site);
    //绘制地图
    map = L.map('map', {
      center: [22.521671, 113.895794],
      zoom: 13
    });
    L.tileLayer(
      "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      {
        subdomains: ["1", "2", "3", "4"],
        attribution: "高德"
      }
    ).addTo(map);
    //  map.on('click', onMapClick);
    // let th=this;
    // function onMapClick(e) {
    //   if(marker){
    //     map.removeLayer(marker)
    //   }  
    //   marker = new L.Marker(e.latlng, {icon: greenIcon}).addTo(map);  
    //   map.addLayer(marker);
    //   th.centerPosition=e.latlng;
    //   console.log(th.centerPosition);
    //   }
    console.log(this.site);
    var locate = this.site;
    var long = locate.slice(locate.indexOf("(") + 1, locate.indexOf(","));
    var latitude = locate.slice(locate.indexOf(",") + 2, locate.indexOf(")"));
    if (marker) {
      map.removeLayer(marker)
    }
    marker = new L.Marker([long, latitude], { icon: greenIcon }).addTo(map);
    map.addLayer(marker);
    map.panTo([long, latitude]);
  },
  watch: {
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .transition-view /deep/.weui-cells__title {
      margin-top: 0.77em;
    margin-bottom: 0.3em;
    padding-left: 15px;
    padding-right: 15px;
    color: #353535;
    font-size: 14px;
} */
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-width: 1px 0 0 1px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  top: 8px;
  left: 7px;
}
.transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  color: #333;
} */
#map {
  width: 100%;
  height: 25%;
}
.content {
  width: 100%;
  height: 75%;
}
.file {
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 16px;
}
.file-icon {
  width: 16px;
  height: 16px;
}
.file-name {
  margin-left: 16px;
  font-size: 12px;
  color: #343434;
}
.file-size {
  font-size: 11px;
  color: #9f9f9f;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.transition-view /deep/ .weui-cells__title {
  color: #333;
}
</style>